<!-- 矿山评价 -->
<template>
  <div class="erfei">
    <h1 class="title">山水林田湖草生态修复绩效评价指数（ERFEI）计算</h1>
    <div class="content">
      <div class="content-form">
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="矿山" class="item" prop="kuangShan">
            <el-input v-model.number="ruleForm.kuangShan"></el-input>
          </el-form-item>
          <el-form-item label="河流" class="item" prop="heLiu">
            <el-input v-model.number="ruleForm.heLiu"></el-input>
          </el-form-item>
          <el-form-item label="森林" class="item" prop="senLin">
            <el-input v-model.number="ruleForm.senLin"></el-input>
          </el-form-item>
          <el-form-item label="农田" class="item" prop="nongTian">
            <el-input v-model.number="ruleForm.nongTian"></el-input>
          </el-form-item>
          <el-form-item label="湖泊" class="item" prop="huPo">
            <el-input v-model.number="ruleForm.huPo"></el-input>
          </el-form-item>
          <el-form-item label="草地" class="item" prop="caoDi">
            <el-input v-model.number="ruleForm.caoDi"></el-input>
          </el-form-item>
          <el-form-item label="社会经济" class="item" prop="sheHuiJingJi">
            <el-input v-model.number="ruleForm.sheHuiJingJi"></el-input>
          </el-form-item>
          <el-form-item label="社会环境" class="item" prop="sheHuiHuanJing">
            <el-input v-model.number="ruleForm.sheHuiHuanJing"></el-input>
          </el-form-item>
          <el-form-item label="财务管理" class="item" prop="caiWuGuanli">
            <el-input v-model.number="ruleForm.caiWuGuanli"></el-input>
          </el-form-item>
          <el-form-item label="项目组织" class="item" prop="xiangMuZuZhi">
            <el-input v-model.number="ruleForm.xiangMuZuZhi"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
            <el-button icon="el-icon-search"></el-button>
          </el-form-item>
        </el-form>

      </div>
    
      <div class="note">

        <!-- <div class="note-img">
            <img src="../../asset/images/note.jpg" alt="">
        </div> -->
        <div class="result">
          <el-card class="box-card" shadow="always">
          <template #header>
            <div class="card-header line">
              <h2>计算结果</h2>
            </div>
          </template>
          <div class="text item2">
            <p>生态绩效：{{ result.shengtai }}</p>
            <p>社会绩效：{{ result.shehui}}</p>
            <p>管理绩效：{{ result.guanli}}</p>
            <p>ERFEI：{{ result.result}}</p>
          </div>
        </el-card>
            
        </div>
      </div>
    </div>
  </div>


  
</template>
<script>
import axios from 'axios'
import { VoEdit } from 'vue-orgchart'

export default {
components: { VoEdit },
  data() {
  var checkForm = (name, value, callback) => {
      if (!value) {
        console.log(name);
        return callback(new Error(`不能为空`));
      }
      setTimeout(() => {
        var re = /^[0-9]+.?[0-9]*/;//判断字符串是否为数字//判断正整数/[1−9]+[0−9]∗]∗/ 
        if (!re.test(value)) {
          callback(new Error('请输入数字值'));
        } else {
            callback();
        }
      }, 500);
    };
  return {

    //表單數據
    result: {
      shengtai:"",
      shehui:"",
      guanli:"",
      result:""
    },
    ruleForm: {
        kuangShan: '',
        heLiu:'',
        senLin:'',
        nongTian:'',
        huPo:'',
        caoDi:'',
        sheHuiJingJi:'',
        sheHuiHuanJing:'',
        caiWuGuanli:'',
        xiangMuZuZhi:''
      },
    rules: {
        kuangShan: [
          { validator: checkForm, trigger: 'blur' }
        ],
        heLiu: [
          { validator: checkForm, trigger: 'blur' }
        ],
        senLin: [
          { validator: checkForm, trigger: 'blur' }
        ],
        nongTian: [
          { validator: checkForm, trigger: 'blur' }
        ],
        huPo: [
          { validator: checkForm, trigger: 'blur' }
        ],
        caoDi: [
          { validator: checkForm, trigger: 'blur' }
        ],
        sheHuiJingJi: [
          { validator: checkForm, trigger: 'blur' }
        ],
        sheHuiHuanJing: [
          { validator: checkForm, trigger: 'blur' }
        ],
        caiWuGuanli: [
          { validator: checkForm, trigger: 'blur' }
        ],
        xiangMuZuZhi: [
          { validator: checkForm, trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    //表單提交
    submitForm(ruleForm) {
        this.$refs[ruleForm].validate((valid) => {
          if (valid) {
           var data = JSON.stringify(this.ruleForm)
            axios({method:'post',url:'/api/ERFEI/cal',data:data})   
              .then((res) => {
                console.log(res)
                const data = res.data.data;
                this.result.shengtai = data.shengTaiJiXiao;
                this.result.shehui = data.sheHuiJiXiao;
                this.result.guanli = data.guanLiJiXiao;
                this.result.result = data.result;
              });
          } else {
            console.log('error submit!!');
            return false;
          }
        }
      );
    },

    resetForm(formName) {
        this.$refs[formName].resetFields();
        this.result.shengtai = "";
        this.result.shehui = "";
        this.result.guanli = "";
        this.result.result = "";
    },

    //时间格式化
    dateFormat: function(row, column) {
      var date = row[column.property];
      if (date == undefined) {
        return "";
      }
      return moment(date).format("YYYY-MM-DD HH:mm:ss");
    },
    exportJSON() {
      let datasourceJSON = {}
      let ChartJSON = this.orgchart.getChartJSON()
      datasourceJSON = JSON.stringify(ChartJSON, null, 2)
      if(document.getElementsByTagName('code')[1]) {
        let code = document.getElementsByTagName('code')[1]
        code.innerHTML = datasourceJSON
      }
      return datasourceJSON
    },
  },
};
</script>


<style lang="scss" scoped>


.card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
}
    
.text {
    font-size: 14px;
}

.item {
  margin-bottom: 20px;
}

.item2 {
  margin-top: 30px;
}

.line {
  border-bottom: 1px solid rgb(187, 185, 185);
  height: 50px;
}

.box-card {
  width: 300px;
}


.edit{
text-align:center;
}
/* #chart{
  font-size:25px;
  height:30px;
  line-height: 30px;
  border-radius:4px 4px 4px 4px;
} */

.erfei {
  width: 100%;
}
.title {
  margin: 60px 0 0 0;
  text-align: center;
}
.result p {
  font-size: 18px;
  margin-bottom: 20px;
}
.result {
  width: 200px;
  padding: 20px;
  margin-left: -600px;
}
.orgchart{
  font-size:25px;
  height:30px;
  line-height: 30px;
  border-radius:4px 4px 4px 4px;
}
#brief {
  white-space: normal;
  word-break: break-all;
  word-wrap: break-word;
}
.content {
  margin: 50px 0 0 100px;
  display: flex;
  justify-content: space-around;
}

.content-form {
  overflow-y: auto;
  background-color: #ffffff;
  width: 20%;
  height: 100%;
}


</style>

